import React, { useEffect, useRef, useState, memo } from 'react';
import echarts from 'echarts';
import './Echart.css';


function EchartsTest(props) {

    const chartContainer = useRef();
    const myChart = useRef(null);

    console.log('子组件渲染');

    useEffect(() => {
        myChart.current = echarts.init(chartContainer.current)
        // echart 初始化
        window.addEventListener('resize', myChart.current.resize);
        myChart.current.on('click', params => {
            console.log('params----------', params);
        });
    
        return () => {
            window.removeEventListener('resize', myChart.current.resize);
        }
    }, []);

    useEffect(() => {
        let option = {
            // 图表上方的标题
            title: {
                text: ''
            },
            // 给图标包裹一个网格
            grid: {
                // 给图表定位
                left: '10%',
                right: '10%',
                top: '10%',
                bottom: '10%'
            },
            // 提示框组件
            tooltip: {
                show: true,
                trigger: 'axis',
                // 自定义提示框显示内容
                formatter: (parmas) => {
                    if (parmas.length < 2) {
                        return;
                    }
                    const online = `<div>${parmas[0].axisValueLabel}</div>`;
                    const twoline = `<div>${parmas[0].marker}${parmas[0].seriesName}：${parmas[0].data} （KM）</div>`;
                    const thirdline = `<div>${parmas[1].marker}${parmas[1].seriesName}：${parmas[1].data} （L）</div>`;
                    return online + twoline + thirdline;
                }
            },
            // 通过点击图例控制哪些系列不显示
            legend: {
                data: ['销量', '价格']
            },
            // 工具栏
            toolbox: {
                show: true,
                feature: {
                    dataView: { readOnly: false },   // 数据视图，可展现图变所用的数据
                    restore: {},                   // 还原
                    saveAsImage: {},                // 保存图片
                    magicType: {                   // 切换类型
                        type: ['line', 'bar'],
                    },
                }
            },
            // x轴
            xAxis: [
                {
                    type: 'category',
                    data: props.xAxis
                }
            ],
            // y轴
            yAxis: [
                {
                    name: '价格',
                    type: 'value',
                    // 设置y轴最大最小值
                    min: value => {
                        return value.min - 5
                    },
                    max: value => {
                        return value.max + 2
                    },
                    // 坐标轴属性
                    axisLabel: {
                        show: true,       // 是否显示y轴刻度
                        formatter: (value, i) => {    // 对y轴刻度进行过滤
                            return value.toFixed(2)
                        },
                        fontSize: 18,
                        color: '#6aa5ca'
                    }
                },
                {
                    name: '销量',
                    type: 'value'
                }
            ],
            // 多组数据
            series: [
                {
                    name: '价格',
                    type: 'bar',
                    yAxisIndex: 0, // 指定引用y轴
                    data: [6, 5, 4, 3, 2, 6, 6, 5, 4, 3, 2, 6,],
                    // 气泡
                    markPoint: {
                        data: [
                            {
                                type: 'max', name: '最大值',
                                itemStyle: {
                                    color: "black" //气泡颜色
                                }
                            },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    // 平均值
                    markLine: {
                        silent: false,
                        lineStyle: {
                            width: 2
                        },
                        data: [
                            {
                                name: '平均值',
                                type: 'average'
                            }
                        ]
                    },
                    // 柱状图颜色属性
                    itemStyle: {
                        color: '#61a0a8'
                    }
                },
                {
                    name: '销量',
                    type: 'line',
                    yAxisIndex: 1,
                    data: props.seriesData,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                },

            ],
            // 缩放
            dataZoom: [
                // 滑动图变缩放
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: 100,
                    minSpan: (2 / 12) * 100
                    // minValueSpan: 2
                },
                // 滑动底部选择条缩放
                {
                    type: 'slider',
                    show: true,     // 缩放进度条
                    xAxisIndex: [0],
                    top: '95%',
                    start: 98,
                    end: 100,
                    minSpan: (2 / 12) * 100
                    // minValueSpan: 2
                }
            ]
        };

        // 加载Echart前，先清空 function
        myChart.current.clear();
        myChart.current.setOption(option);
    });

    return (
        <>
            <div ref={chartContainer} id="echart-container"></div>
        </>
    )

}

export default memo(EchartsTest);